<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="keywords" content="">
  <meta name="author" content="">
  <meta name="robots" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- PAGE TITLE HERE -->
  <title>职位列表</title>

  <link href="/css/nice-select.css" rel="stylesheet">
  <link href="/css/jquery.dataTables.min.css" rel="stylesheet">

  <!-- Style css -->
  <link href="/css/style.css" rel="stylesheet">

</head>
<body>
<!--**********************************
    Content body start
***********************************-->

  <!-- row -->
  <div class="container-fluid">
    <div class="d-flex align-items-center mb-4 flex-wrap mt-4">
      <h4 class="fs-20 font-w600  me-auto">职位列表</h4>
      <div>
        <a href="/user/new-job" class="btn btn-primary me-3 btn-sm" th:if="${session.loginType == 2 }"><i class="fas fa-plus me-2" ></i>发布职位</a>
        <a href="javascript:void(0);" class="btn btn-secondary btn-sm me-3"> <i class="fas fa-envelope"></i></a>
        <a href="javascript:void(0);" class="btn btn-secondary btn-sm me-3"><i class="fas fa-phone-alt"></i></a>
        <a href="javascript:void(0);" class="btn btn-secondary btn-sm"><i class="fas fa-info"></i></a>

      </div>
    </div>
    <div class="row">
      <div class="col-xl-12">
        <div class="table-responsive">
          <!-- 修改后的表格部分 -->
          <table class="table display mb-4 dataTablesCard job-table table-responsive-xl card-table" id="example5">
            <thead>
            <tr>
              <th>序号</th>
              <th>职位名称</th>
              <th>类型</th>
              <th>发布日期</th>
              <th>关闭日期</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <!-- 动态行：使用Thymeleaf遍历jobs -->
            <tr th:each="job : ${jobs}">
              <td th:text="${job.id}" th:value="${job.id}">1</td>
              <td th:text="${job.title}">Network Engineer</td>
              <td class="wspace-no" th:text="${job.jobType}">Full-Time</td>
              <td th:text="${#temporals.format(job.postTime, 'yyyy-MM-dd')}">12-01-2021</td>
              <td th:text="${#temporals.format(job.expirationTime, 'yyyy-MM-dd')}">25-01-2021</td>
              <td>
                <!-- 根据状态显示不同徽章 -->
                <span th:if="${job.status} == 1" class="badge badge-success badge-lg light">启用</span>
                <span th:if="${job.status} == 0" class="badge badge-danger badge-lg light">停止</span>
              </td>
              <td>
                <div class="action-buttons d-flex justify-content-end">
                  <!-- 查看按钮修改 -->
                  <a href="javascript:void(0);" class="btn btn-success light mr-2"
                     th:onclick="'viewJob(' + ${job.id} + ')'">
                    <svg xmlns="http://www.w3.org/2000/svg" class="svg-main-icon" width="24px" height="24px" viewbox="0 0 32 32" x="0px" y="0px"><g data-name="Layer 21"><path d="M29,14.47A15,15,0,0,0,3,14.47a3.07,3.07,0,0,0,0,3.06,15,15,0,0,0,26,0A3.07,3.07,0,0,0,29,14.47ZM16,21a5,5,0,1,1,5-5A5,5,0,0,1,16,21Z" fill="#000000" fill-rule="nonzero"></path><circle cx="16" cy="16" r="3" fill="#000000" fill-rule="nonzero"></circle></g></svg>
                  </a>

                  <!-- 编辑按钮修改 -->
                  <a href="javascript:void(0);"  class="btn btn-secondary light mr-2"
                     th:onclick="'editJob(' + ${job.id} + ')'">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewbox="0 0 24 24" version="1.1" class="svg-main-icon">
                      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <rect x="0" y="0" width="24" height="24"></rect>
                        <path d="M8,17.9148182 L8,5.96685884 C8,5.56391781 8.16211443,5.17792052 8.44982609,4.89581508 L10.965708,2.42895648 C11.5426798,1.86322723 12.4640974,1.85620921 13.0496196,2.41308426 L15.5337377,4.77566479 C15.8314604,5.0588212 16,5.45170806 16,5.86258077 L16,17.9148182 C16,18.7432453 15.3284271,19.4148182 14.5,19.4148182 L9.5,19.4148182 C8.67157288,19.4148182 8,18.7432453 8,17.9148182 Z" fill="#000000" fill-rule="nonzero" transform="translate(12.000000, 10.707409) rotate(-135.000000) translate(-12.000000, -10.707409) "></path>
                        <rect fill="#000000" opacity="0.3" x="5" y="20" width="15" height="2" rx="1"></rect>
                      </g>
                    </svg>
                  </a>
                  <!-- 删除按钮 -->
                  <a href="javascript:void(0);" th:onclick="'deleteJob(' + ${job.id} +   ')'" class="btn btn-danger light">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewbox="0 0 24 24" version="1.1" class="svg-main-icon">
                      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <rect x="0" y="0" width="24" height="24"></rect>
                        <path d="M6,8 L6,20.5 C6,21.3284271 6.67157288,22 7.5,22 L16.5,22 C17.3284271,22 18,21.3284271 18,20.5 L18,8 L6,8 Z" fill="#000000" fill-rule="nonzero"></path>
                        <path d="M14,4.5 L14,4 C14,3.44771525 13.5522847,3 13,3 L11,3 C10.4477153,3 10,3.44771525 10,4 L10,4.5 L5.5,4.5 C5.22385763,4.5 5,4.72385763 5,5 L5,5.5 C5,5.77614237 5.22385763,6 5.5,6 L18.5,6 C18.7761424,6 19,5.77614237 19,5.5 L19,5 C19,4.72385763 18.7761424,4.5 18.5,4.5 L14,4.5 Z" fill="#000000" opacity="0.3"></path>
                      </g>
                    </svg>
                  </a>
                </div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

<!--**********************************
    Content body end
***********************************-->
<!-- 在 jQuery 之前引入 SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Required vendors -->
<script src="/js/global.min.js"></script>
<script src="/js/Chart.bundle.min.js"></script>
<script src="/js/jquery.nice-select.min.js"></script>

<!-- Apex Chart -->
<script src="/js/bootstrap-datepicker.min.js"></script>

<!-- Chart piety plugin files -->
<script src="/js/jquery.dataTables.min.js"></script>
<script src="/js/datatables.init.js"></script>
<script src="/js/custom.min.js"></script>
<script src="/js/dlabnav-init.js"></script>
<script src="/js/demo.js"></script>

<script>
  // 查看职位详情
  function viewJob(jobId) {
    window.location.href = "/user/job-view/" + jobId;
  }

  //编辑职位信息
  function editJob(jobId) {
    window.location.href = "/user/job-edit/" + jobId;
  }

  function deleteJob(jobID) {
    if(confirm('确定要删除这个职位吗？')) {
      $.ajax({
        url: '/api/job/delete/' + jobID,
        type: 'DELETE',
        success: function (result) {
          if (result.code === 0) {
            Swal.fire({
              icon: 'success',
              title: '删除成功',
              text: '职位信息已删除',
              showConfirmButton: false,
              timer: 2000
            }).then(() => {
              location.reload();
            });
          } else {
            Swal.fire({
              icon: 'error',
              title: '删除失败',
              text: result.msg
            });
          }
        },
        error: function(result) {
          Swal.fire({
            icon: 'error',
            title: '请求失败 请检查网络连接',
            text: result.msg
          });
        }
      });
    }
  }


</script>

</body>
</html>